<template>
	<div class="diy_home diy_list diy_meeting_information" id="diy_meeting_information_list">
		<!-- 列表 -->
		<div class="diy_view_list list list-x" v-if="show">
			<router-link class="diy_card goods diy_list_box_wrap" v-for="(o, i) in list" :key="i"
				:to="'/meeting_information/details?meeting_information_id=' + o['meeting_information_id']">
				<!-- 顶部横幅/Logo区域 -->
				<div class="card_banner" v-if="o.meeting_cover">
					<div class="banner_image" :style="{ backgroundImage: 'url(' + $fullUrl(o.meeting_cover) + ')' }">
						<div class="banner_overlay">
							<div class="banner_content">
								<div class="conference_number" v-if="o.meeting_number">{{ o.meeting_number }}</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 内容区域 -->
				<div class="diy_list_item_box">
					<!-- 会议名称 -->
					<div class="conference_title_box" v-if="$check_field('get','conference_name','/meeting_information/details') && o.conference_name">
						<h3 class="conference_title_cn">{{ $getBilingualText(o.conference_name) }}</h3>
						<p class="conference_title_en" v-if="currentLanguage === 'en'">{{ getEnglishText(o.conference_name) }}</p>
					</div>
					
					<!-- 关键信息卡片 -->
					<div class="info_cards">
						<!-- 会议时间 -->
						<div class="info_card time_card" v-if="o.meeting_time">
							<i class="el-icon-time"></i>
							<span class="info_label">{{ t('meetingTime') }}</span>
							<span class="info_value">{{ formatDate(o.meeting_time) }}</span>
						</div>
						
						<!-- 会议地点 -->
						<div class="info_card location_card" v-if="o.meeting_venue">
							<i class="el-icon-location"></i>
							<span class="info_label">{{ t('meetingVenue') }}</span>
							<span class="info_value">{{ $getBilingualText(o.meeting_venue) }}</span>
						</div>
						
						<!-- 截稿时间 -->
						<div class="info_card deadline_card" v-if="o.meeting_time">
							<i class="el-icon-document"></i>
							<span class="info_label">{{ t('submissionDeadline') }}</span>
							<span class="info_value">{{ getDeadlineDate(o.meeting_time) }}</span>
						</div>
					</div>
				</div>
			</router-link>
		</div>
		<!-- 表格 -->
		<div class="diy_view_table" v-else>
			<table class="diy_table">
				<tr class="diy_row">
					<th class="diy_title" v-if="$check_field('get','meeting_number')">
						{{ t('meetingNumberLabel') }}
					</th>
					<th class="diy_title" v-if="$check_field('get','conference_name')">
						{{ t('meetingNameLabel') }}
					</th>
					<th class="diy_title" v-if="$check_field('get','meeting_type')">
						{{ t('meetingTypeLabel') }}
					</th>
					<th class="diy_title" v-if="$check_field('get','meeting_time')">
						{{ t('meetingTimeLabel') }}
					</th>
					<th class="diy_title" v-if="$check_field('get','meeting_venue')">
						{{ t('meetingVenueLabel') }}
					</th>
					<th class="diy_title" v-if="$check_field('get','amount_of_participation')">
						{{ t('participationAmountLabel') }}
					</th>
					<th class="diy_title" v-if="$check_field('get','site_equipment')">
						{{ t('siteEquipment') }}
					</th>
					<th class="diy_title" v-if="$check_field('get','meeting_cover')">
						{{ t('meetingCover') }}
					</th>
				</tr>
				<tr class="diy_row" v-for="(o,i) in list" :key="o+i">
					<td class="diy_field diy_text" v-if="$check_field('get','meeting_number')">
						<span>{{ o["meeting_number"] }}</span>
					</td>
					<td class="diy_field diy_text" v-if="$check_field('get','conference_name')">
						<span>{{ $getBilingualText(o["conference_name"]) }}</span>
					</td>
					<td class="diy_field diy_text" v-if="$check_field('get','meeting_type')">
						<span>{{ $getBilingualText(o["meeting_type"]) }}</span>
					</td>
					<td class="diy_field diy_text" v-if="$check_field('get','meeting_time')">
						<span>{{ $formatDateTime(o["meeting_time"], 'datetime') }}</span>
					</td>
					<td class="diy_field diy_text" v-if="$check_field('get','meeting_venue')">
						<span>{{ $getBilingualText(o["meeting_venue"]) }}</span>
					</td>
					<td class="diy_field diy_number" v-if="$check_field('get','amount_of_participation')">
						<span>{{ o["amount_of_participation"] }}</span>
					</td>
					<td class="diy_field diy_text" v-if="$check_field('get','site_equipment')">
						<span>{{ $getBilingualText(o["site_equipment"]) }}</span>
					</td>
					<td class="diy_field" v-if="$check_field('get','meeting_cover')">
						<img class="diy_img" :src="$fullUrl(o['meeting_cover'])" />
					</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	import mixinI18n from "@/mixins/i18n.js";

	export default {
		mixins: [mixinI18n],
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				},
			},
			show: {
				type: Boolean,
				default: function(){
					return true;
				}
			}
		},
		methods: {
			getChineseText(text) {
				if (!text) return '';
				try {
					const parsed = JSON.parse(text);
					return parsed.zh || text;
				} catch (e) {
					return text;
				}
			},
			getEnglishText(text) {
				if (!text) return '';
				try {
					const parsed = JSON.parse(text);
					return parsed.en || '';
				} catch (e) {
					return '';
				}
			},
			formatDate(dateStr) {
				if (!dateStr) return '';
				try {
					const date = new Date(dateStr);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}.${month}.${day}`;
				} catch (e) {
					return dateStr;
				}
			},
			getDeadlineDate(dateStr) {
				if (!dateStr) return '';
				try {
					const date = new Date(dateStr);
					date.setDate(date.getDate() - 7); // 提前7天作为截稿时间
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}.${month}.${day}`;
				} catch (e) {
					return '';
				}
			},
			getOrganizer(text) {
				if (!text) return '';
				try {
					const parsed = JSON.parse(text);
					return parsed.zh || parsed || text;
				} catch (e) {
					return text;
				}
			}
		},
		created() {
		}
	};
</script>

<style scoped>
.diy_view_list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px 0;
	position: relative;
}

.goods {
	display: flex;
	width: calc(25% - 15px);
	min-width: 0;
	flex-direction: column;
	background-color: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.goods:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 顶部横幅区域 */
.card_banner {
	width: 100%;
	height: 180px;
	position: relative;
	overflow: hidden;
}

.banner_image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.banner_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 12px;
}

.banner_content {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.conference_number {
	background: rgba(255, 255, 255, 0.9);
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
	color: #333;
}


/* 内容区域 */
.diy_list_item_box {
	padding: 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.conference_title_box {
	margin-bottom: 8px;
}

.conference_title_cn {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin: 0 0 6px 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.conference_title_en {
	font-size: 12px;
	color: #666;
	margin: 0;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 信息卡片 */
.info_cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 0 0;
	position: relative;
	z-index: 2;
}

.info_card {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	gap: 8px;
}

.info_card i {
	font-size: 16px;
	flex-shrink: 0;
}

.time_card {
	background: #f5f5f5;
	color: #666;
}

.time_card i {
	color: #999;
}

.location_card {
	background: #f5f5f5;
	color: #666;
}

.location_card i {
	color: #999;
}

.deadline_card {
	background: #f5f5f5;
	color: #666;
}

.deadline_card i {
	color: #999;
}

.info_label {
	font-weight: 500;
	margin-right: 4px;
}

.info_value {
	flex: 1;
	text-align: right;
	font-weight: 600;
}


/* 响应式设计 */
@media (max-width: 992px) {
	.goods {
		width: calc(50% - 10px);
	}
}

@media (max-width: 768px) {
	.goods {
		width: 100%;
		min-width: auto;
	}
	
	.diy_view_list {
		gap: 15px;
		padding: 15px 0;
	}
}
</style>
